<template>
	<view>
		<!-- <view class="big">
			<form @submit="formSubmit" @reset="formReset" class="formdata">
				<view class="uni-form-item uni-column">
					<input class="uni-input" name="name" placeholder="请输入用户名" />
				</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input" name="password" type="password" placeholder="请输入密码" />
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">登录</button>
					<button type="default" form-type="reset">重置</button>
				</view>
				<view class="register" @click="register">立即注册</view>
			</form>
		</view> -->
		<view class="big">
			<view class="form">
				<u-form :model="form" ref="uForm">
			<u-form-item prop="nickname">
				<u-input placeholder="请输入昵称" v-model="form.nickname" />
			</u-form-item>
			<u-form-item prop="name">
				<u-input placeholder="请输入用户名" v-model="form.name" />
			</u-form-item>
			<u-form-item prop="password">
				<u-input placeholder="请输入密码" type="password" v-model="form.password" />
			</u-form-item>
			<u-form-item prop="password2">
				<u-input placeholder="请再次输入密码" type="password" v-model="form.password2" />
			</u-form-item>
			</u-form>
			<view>
				<u-button @click="submit">注册</u-button>
				<u-button @click="reset">重置</u-button>
			</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					nickname:'',
					name: '',
					password: '',
					password2:''
				},
				rules: {
					nickname: [
						{ 
							required: true, 
							message: '请输入昵称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: 'blur',
						}
						],
					name: [
						{ 
							required: true, 
							message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: 'blur',
						}
						],
					password: [
						{
							min: 3, 
							message: '密码格式不正确', 
							trigger: 'blur'
						}
						],
					password2: [
						{
							min: 3, 
							message: '密码格式不正确', 
							trigger: 'blur'
						}
						]
				}
			}
		},
		methods: {
			//注册
			async getRegister(nickname,username,password){
				console.log(nickname,username,password)
				const res = await this.$api.getRegister({
					nickname:nickname,
					username:username,
					password:password
				})
				console.log(res)
				if(res.code==200){
					this.$tool.success("注册成功，请登录")
					setTimeout(function(){
						uni.navigateTo({
							url: '../login/login'
						})
					},1000)
				}else{
					console.log(res.msg.replace('register.password:','').replace('register.username:','').replace('register.nickname:',''))
					alert(res.msg.replace('register.password:','').replace('register.username:','').replace('register.nickname:',''))
				}
				console.log(res)
			},
			submit() {
				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
				// 		console.log('验证通过');
				// 	} else {
				// 		console.log('验证失败');
				// 	}
				// 	});
				let {nickname,name,password,password2}=this.form
				if(password==password2){
					console.log('成功')
					this.getRegister(nickname,name,password)
				}else{
					alert('两次输入密码不一样')
				}
				},
			reset(){
				this.form.nickname=''
				this.form.name=''
				this.form.password=''
				this.form.password2=''
			},
			register(){
				uni.navigateTo({
					url:'../register/register'
				})
			}
			
		},
		onLoad(){
			// this.getGoods()
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
			}
	}
</script>

<style scoped>
	.big{
		width: 100vw;
		height: 93.2vh;
		background-color: rgb(243, 241, 241);
		overflow: hidden;
		position: relative;
	}
	.form{
		position: absolute;
		top: 58%;
		display: inline-block;
		width: 100%;
		transform: translate(0,-70%);
	}
	.u-input{
		background-color: white;
		border-radius: 22px;
		margin: 0 10px;
		height: 30px;
		padding: 0px 15px;
		
	}
	
	.u-button{
		background: rgb(118, 237, 214);
		color: white;
		border-radius: 22px;
		margin: 15px 18px;
		width: 40%;
		float: left;
		
	}
	.register{
		float: right;
		margin-right: 25px;
	}
</style>
